<template>
	<view class="navigator flex_sbc">
		<navigator open-type="navigateBack" hover-class="none" class="uni-585C66">取消</navigator>
		<view class="z-font-32">选择方案</view>
		<view class="uni-color-main" @click="buttonClick">确认</view>
	</view>
	<scroll-view scroll-y class="content" @scrolltolower="nextPage">
		<search-box @search="search"></search-box>
		<view class="uni-mt-32 flex_sbc">
			<view class="z-font-32">智能匹配方案推荐</view>
			<view class="uni-color-grey">没有合适的方案</view>
		</view>
		<z-add-button text="新建方案" @click="addScheme" class="uni-mt-16"></z-add-button>
		<view
			v-for="(scheme, index) in schemeList"
			:key="index"
			:class="['plan-box', relScheme.findIndex((item) => item.id === scheme.id) >= 0 ? 'active' : 'no']"
			@click="selItem(scheme)"
		>
			<view class="flex_fsc">
				<image
					:src="`${setting.oss_pub_domain}/app-img/icon/icon-checkbox${
						relScheme.findIndex((item) => item.id === scheme.id) >= 0 ? '' : '-no'
					}.png`"
					class="icon-size-32"
				></image>
				<view class="z-font-32 uni-ml-12">{{ scheme.name }}</view>
			</view>
			<view class="uni-mt-20">方案描述</view>
			<view class="uni-color-grey z-font-24 uni-mt-4 u-line-1">{{ scheme.description }}</view>
		</view>
	</scroll-view>
	<bottom-box :buts="buts" @change="buttonClick" intervalBg="#FFFFFF" :interval="false"></bottom-box>
</template>

<script setup>
import { getSchemeList } from '@/api/scheme.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();

let eventChannel;
onLoad((opt) => {
	relScheme.value = uni.getStorageSync('select-scheme') || [];
	eventChannel = that.getOpenerEventChannel();
	fetchData();
});
// 搜索方案
function search(name) {
	pageParms.pageNum = 1;
	fetchData({ name });
}
const schemeList = ref([]),
	pageParms = reactive({
		total: 0,
		pageNum: 1,
		pageSize: 10
	});
function fetchData(query = {}) {
	getSchemeList({ pageNum: pageParms.pageNum, pageSize: pageParms.pageSize, ...query }).then((res) => {
		if (pageParms.pageNum === 1) {
			schemeList.value = res.rows;
		} else {
			schemeList.value.push(...res.rows);
		}
		pageParms.total = res.total;
	});
}
function nextPage() {
	if (Math.ceil(pageParms.total / pageParms.pageSize) === pageParms.pageNum) return;
	pageParms.pageNum += 1;
	fetchData();
}
//  选择方案
const relScheme = ref([]);
function selItem(item) {
	const index = relScheme.value.findIndex((el) => el.id === item.id);
	if (index >= 0) {
		relScheme.value.splice(index, 1);
	} else {
		relScheme.value.push(item);
	}
}

// 底部按钮
const buts = [
	{
		label: '确定添加',
		bgColor: 'uni-color-main-bg'
	}
];

function buttonClick() {
	eventChannel.emit('relScheme', relScheme.value);
	uni.navigateBack();
}

// 新建方案
function addScheme() {
	uni.removeStorageSync('edit-scheme');
	uni.navigateTo({
		url: '/pages/scheme/add/add?select=1',
		events: {
			editDone: () => {
				pageParms.pageNum = 1;
				fetchData();
			}
		}
	});
}
</script>

<style lang="scss">
@import '@/assets/select.scss';
</style>
